<template>
    <el-container direction="vertical">
        <el-container direction="horizontal">
            <el-aside width="200px">
                <el-menu mode="vertical" background-color="#2b2f3a" class="el-menu-vertical-demo" text-color="#fff"
                    default-active="">
                    <SubItem :data="sys.treeMenus"></SubItem>
                </el-menu>
            </el-aside>
            <el-container direction="vertical">
                <el-tabs v-model="sys.activeTab" tab-position="top" @tab-remove="handlerClickRemove"
                    @tab-click="handleClick">
                    <el-tab-pane :closable="false" label="首页" name="home">
                    </el-tab-pane>
                    <template v-for="item in sys.tabs">
                        <el-tab-pane :closable="true" :label="item.menuName" :name="item.ename"></el-tab-pane>
                    </template>
                </el-tabs>
                <el-main height="">
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </el-container>

</template>

<script setup>
import SubItem from '@/views/SubItem.vue';
import useSys from '@/store/useSys'
import router from '@/router'
let sys = useSys()
let handleClick = (tab) => {
    router.push({ name: tab.paneName });
}
let handlerClickRemove = (tab) => {
    for (let i = 0; i < sys.tabs.length; i++) {
        if (sys.tabs[i].ename == tab) {
            //如果是选中的选项卡那么就需要动态的切换到上一个选项卡
            if (tab == sys.activeTab) {
                if (i == 0) {
                    sys.activeTab = "home"
                } else {
                    sys.activeTab = sys.tabs[i - 1].ename;
                }
                router.push({ name: sys.activeTab })
            }
            sys.tabs.splice(i, 1);
            return;
        }
    }
}
</script>

<style scoped>
.el-menu {
    position: relative;
    height: 100%;
}

.el-container {
    height: 100%;
}
</style>
